﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>全局组件</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>vue事件</h1><br/>

<div id="app">
    {{name}}<br/>

    <!--
        好处:
                提高开发效率
                方便重复使用
                便于协同开发
                更容易被管理和维护

        分类    页面级组件:
                1.一个页面是一个组件
                2.将可复用的部分抽离出来   基础组件
                3.一个自定义标签，vue就会把它当成一个组件 div p span a header section vue可以给这些标签一些意义
    -->

    <my-handsome>

    </my-handsome>
    <br />
    <div>This源生希望全局my-handsome的作用就是现在这个div所有内容<span>内容</span></div>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>

    //用法
    //全局组件  可以声明一次在任何地方使用，
    //      一般写插件的时候用全局组件多一些,如果该组件人人都需要用，也可放全局
    // 局部组件  必须告诉这个组件属于谁也就是在哪个页面下面使用局部组件

    //组件名不要带有大写  多个单词用 -
    //一定要大写，必须定义的和使用的名字一样并且首字母大写
    Vue.component('my-handsome',{//一个对象可以看成一个组件
        template:'<div>This全局组件希望全局my-handsome的作用就是现在这个div所有内容<span style="font-weight: bold;">{{handsome}}</span></div>',
        data(){//组件中的数据必须是函数类型  返回一个实例为组件的数据
            return {
                handsome:'自己的模版只能取自己的data的数据'
            }
        }
    });
    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据'
        }
    });
</script>

</body>
</html>